<!DOCTYPE html>
<html>
<head>
	<title>6</title>
	<meta charset="utf-8">
	<link rel="stylesheet" type="text/css" href="css/reset.css">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
	<link rel="stylesheet" type="text/css" href="css/chat.css">
</head>
<body>
		<div class="box">
		 	<div class="content">
				<div class="contactList">
					<ul>
						<li id="list1" class="tab"><img src="images/1.png"></li>
						<li id="list2"><img src="images/2.png"></li>
						<li id="list3"><img src="images/3.png"></li>
					</ul>
				</div>
		<div class="boxs">
			<div class="inside" id="detail">
				<div class="box1">
					<ul>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>

							</div>
							<img src="images/在线.png" class="imge">
						</li>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>
							</div>
							<img src="images/在线.png" class="imge">
						</li>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>
							</div>
							<img src="images/在线.png" class="imge">
						</li>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>
							</div>
							<img src="images/在线.png" class="imge">
						</li>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>
							</div>
							<img src="images/在线.png" class="imge">
						</li>
					</ul>
				</div>
				<div class="box1">
					<ul>
						<li class="list">
						
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>

							</div>
							<img src="images/在线.png" class="imge">
						</li>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>
							</div>
							<img src="images/在线.png" class="imge">
						</li>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>
							</div>
							<img src="images/在线.png" class="imge">
						</li>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>
							</div>
							<img src="images/在线.png" class="imge">
						</li>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>
							</div>
							<img src="images/在线.png" class="imge">
						</li>
					</ul>
				</div>
				<div class="box1">
				
					<ul>
						<li class="list">
						
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>

							</div>
							<img src="images/在线.png" class="imge">
						</li>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>
							</div>
							<img src="images/在线.png" class="imge">
						</li>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>
							</div>
							<img src="images/在线.png" class="imge">
						</li>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>
							</div>
							<img src="images/在线.png" class="imge">
						</li>
						<li class="list">
							<a href=""><img src="images/头像1.jpg"></a>
							<div class="info">
								<p>Miro Badev</p>
								<p><span>mirobadev@gmail.com</span></p>
							</div>
							<img src="images/在线.png" class="imge">
						</li>
					</ul>
				</div>
			</div>
		</div>

			
			<div class="message"></div>
			<div class="clock"></div>

			<div class="search-img">
				<i class="fa fa-search"></i>
			</div>
			<input type="text" id="input" >
			</div>
			
		</div>
<script type="text/javascript" src="js/chat.js"></script>
</body>
</html>